
<template>
    <div class="wrap">
        <div class="list">
            <ul v-if="!$root.$data.is_szy">
                <li :class="item.path == currItem.path?'choosen':''" v-for="(item,index) in list" :key="index" @click="switchItem(item)">{{item.title}}</li>
            </ul>
        </div>
        <div class="cont">
            <div class="left" @click="showPrevious">
                <div class="previous-arrow"></div>
            </div>
            <div class="contentWrap">
                <div id="list" class="content" :style="{left: -imgLeft + 'px', width: imgWidth + 'px'}">
                    <img  v-for="(item,index) in imageArray" :key="index" :src="item">
                </div>
            </div>
            <div class="right" @click="showNext">
                <div class="next-arrow"></div>
            </div>
        </div>
        <div class="foot">
            <div class="buttons">
                <ul>
                    <li :class="n==oldIndex?'on':''" v-for="n in buttons.length" :key="n" @click="clickButton(n)">{{n}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        props:{
        },
        data(){
            return{
                list: [
                    {
                        title: "快捷下单输送",
                        path: "kjxdss",
                        num: "9"
                    },
                    {
                        title: "微信维修",
                        path: "wxwx",
                        num: "11"
                    }
                ],
                currItem: {},
                // 存储图片地址的数组
                imageArray: [],
                imgLeft: 960,
                imgWidth: 0,
                // 向左或向右的偏移张数
                times: 0,
                // 是否正在滚动
                isGoing: false,
                buttons: '',
                oldIndex: 1,
            }
        },
        created(){
            if(this.$root.$data.is_szy){
                this.list = [{
                    title: "医废确认指南",
                    path: "yfszy",
                    num: "12"
                }]
            }else if(this.$root.$data.cid == 17){
                this.list.push({
                    title: "医废确认指南",
                    path: "yfLy",
                    num: "15"
                })
            }else {
                this.list.push({
                    title: "医废确认指南",
                    path: "yfOther",
                    num: "12"
                })
            }

        },
        mounted() {
            let _this = this;
            _this.imgLeft = jQuery('.contentWrap').width();
            _this.currItem = _this.list[0];
            _this.switchItem(_this.currItem);

            jQuery(document).on("mousewheel DOMMouseScroll", function (e) {
                var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                    (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
                if(!_this.isGoing) {
                    if (delta > 0) {
                        // 向上滚
                        _this.showPrevious();
                    } else if (delta < 0) {
                        // 向下滚
                        _this.showNext()
                    }
                }
            })
        },
        beforeDestroy(){
            jQuery(document).unbind('mousewheel');
        },
        methods:{
            animate(offset) {
                // this.imgLeft += offset
                let w = -this.imgLeft;
                var n = Number(this.currItem.num)
                var list = document.getElementById('list')
                var newLeft = parseInt(list.style.left) + offset
                var time = 400//位移总时间
                var interval = 10 //位移间隔
                var speed = offset/(time/interval)//每次位移量
                var _this = this
                function go(){
                    _this.isGoing = true
                    if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed >0 && parseInt(list.style.left) < newLeft)) {
                        list.style.left = parseInt(list.style.left) + speed + 'px'
                        setTimeout(go,interval);
                    }
                    else {
                        _this.isGoing = false
                        list.style.left = newLeft + 'px'
                        if(newLeft > w){
                            list.style.left = n * w + 'px'
                            _this.oldIndex = _this.buttons.length
                        }
                        if(newLeft < n * w){
                            list.style.left = w + 'px'
                            _this.oldIndex = 1
                        }
                    }
                }
                go()
            },
            showNext() {
                if(!this.isGoing) {
                    this.animate(-this.imgLeft)
                    this.oldIndex += 1
                }
            },
            showPrevious() {
                if(!this.isGoing) {
                    this.animate(this.imgLeft)
                    this.oldIndex -= 1
                }
            },
            switchItem(item) {
                this.imageArray = []
                this.currItem = item
                let w = this.imgLeft +1;
                this.imgWidth = (Number(item.num) + 2) * w
                // 首尾各多加一张
                this.imageArray.push("/static/guideImages/" + item.path + "/" + Number(item.num) +".png")
                for(var i = 1; i < Number(item.num)+1; i++) {
                    this.imageArray.push("/static/guideImages/" + item.path + "/" + i +".png")
                }
                this.imageArray.push("/static/guideImages/" + item.path + "/" + 1 +".png")
                this.buttons = this.imageArray.slice(1,this.imageArray.length-1)
                this.clickButton(1)
            }
            ,clickButton(n) {
                var o = -this.imgLeft * (n - this.oldIndex)
                this.animate(o)
                this.oldIndex = n
            }
        }

    }
</script>
<style scoped lang="less">
    @import "../assets/less/guide.less";
</style>

